<template>
  <div class="courseLiveBox">
    <!-- 左侧课程列表显示区域 -->
    <div class="course_title">
      <div class="course_title_left">{{ list[leftIndex].title }}</div>
    </div>
    <div class="courseListBox">
      <div v-for="(item,index) in list[leftIndex].courseList" :key="index" class="courseList">
        <div class="course_img">
          <img :src="list[leftIndex].courseList[index].url" alt=""/>
          <div class="status-box">
            <div
              :class="list[leftIndex].courseList[index].liveStatus==='live'?'live':list[leftIndex].courseList[index].liveStatus==='unlive'?'unlive':'playback'"
              class="left"
            >
              <img
                v-if="list[leftIndex].courseList[index].liveStatus==='live'"
                src="../../../../assets/property/live.png"
                alt
                class="left-status-img"
              />
              <img
                v-if="list[leftIndex].courseList[index].liveStatus==='unlive'"
                src="../../../../assets/property/unlive.png"
                alt
                class="left-status-img"
              />
              <img
                v-if="list[leftIndex].courseList[index].liveStatus==='playback'"
                src="../../../../assets/property/playback.png"
                alt
                class="left-status-img"
              />
              <div
                class="status-hint"
              >{{ list[leftIndex].courseList[index].liveStatus==='live'?'直播中':list[leftIndex].courseList[index].liveStatus==='unlive'?'未开播':'回放'}}
              </div>
            </div>
            <div class="right">
              <div>{{ list[leftIndex].courseList[index].studentNum }}人在学习</div>
            </div>
          </div>
        </div>
        <div class="course_con">
          <div class="course_con_title">{{ list[leftIndex].courseList[index].title }}</div>
          <div class="course_con_bottom">
            <span>{{ list[leftIndex].courseList[index].teacher }}老师</span>
            <!--<span>-->
            <!--<i class="el-icon-chat-dot-round"></i>-->
            <!--评论{{ list[leftIndex].courseList[index].comment }}-->
            <!--</span>-->
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧课程编辑区域 -->
    <div v-if="list.length && list[leftIndex].showRight">
      <div class="editRightList">
        <!-- 头部提示区域 -->
        <header class="title">课程列表设置</header>
        <div class="editCon">
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">列表标题：</span>
            <el-input v-model="list[leftIndex].title" style="width:200px;"></el-input>
          </div>
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">选择分类：</span>
            <el-cascader
              :options="courseCategorys"
              v-model="list[leftIndex].courseType"
              clearable
              style="width:200px;"
              @change="courseType($event)"
            />
          </div>
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">发布时间：</span>
            <el-select
              v-model="list[leftIndex].recentDay"
              placeholder="请选择"
              style="width:200px;"
              @change="recentDay($event)"
              value="">
              <el-option
                v-for="item in dayOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">展示条数：</span>
            <el-select
              v-model="list[leftIndex].limit"
              placeholder="请选择"
              style="width:200px;"
              @change="limitNumber($event)"
              value=""
            >
              <el-option
                v-for="item in selectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">选择课程：</span>
            <el-button
              icon="el-icon-search"
              class="add_ad"
              style="width:200px;margin:5px 0;"
              @click="dialog = true"
            >选择
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="选择课程" :visible.sync="dialog" width="500px">
      <el-row>
        <el-input
          v-model="teacherName"
          clearable
          placeholder="请输入课程名称或关键字"
          style="width:200px;"
          @clear="filterTable = tableData"
          @keyup.enter.native="searchTeacher"
        ></el-input>
        <el-button type="primary" @click="searchTeacher">搜 索</el-button>
      </el-row>
      <el-table
        type="selection"
        ref="multipleTable"
        :data="newTable"
        tooltip-effect="dark"
        :row-key="getRowKey"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
        <el-table-column prop="title" label="名称"></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="currentPage"
        :page-size="currentSize"
        :total="filterTable.length"
        style="margin-top:20px"
      ></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {getCategoryList} from '@/api/subject/category'
  import {getTenantId} from "@/utils/auth"
  import {courseList} from '@/api/user/user' // 数据接口

  export default {
    props: ['list', 'leftIndex'],
    data() {
      return {
        courseCategorys: [],
        rightIndex: 0,
        currentPage: 1,
        currentSize: 5,
        fileList: [],
        dialog: false,
        teacherName: '',
        filterTable: [],
        tableData: [],
        // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
        getRowKey(row) {
          return row.id
        },
        EduUserVo: {},
        keyWord: '',
        courseDialogVisible: false,
        classDialogVisible: false,
        dayValue: '',
        limitValue: '',
        linkTableData: [{name: 'class NO.1', price: '2', number: '2', createTime: '2'}],
        dayOptions: [{value: '3', label: '最近3天'}, {value: '7', label: '最近7天'}, {value: '15', label: '最近15天'}, {value: '30', label: '最近30天'}],
        cascaderOptions: [],
        selectOptions: [{value: '1', label: '1'}, {value: '2', label: '2'}, {value: '3', label: '3'}, {value: '4', label: '4'}, {value: '5', label: '5'}]
      }
    },
    mounted() {
      this.getCategoryList();
      this.getCourseListData();
    },
    computed: {
      newTable() {
        return this.filterTable.slice(
          (this.currentPage - 1) * this.currentSize,
          this.currentPage * this.currentSize
        )
      }
    },
    methods: {
      getCategoryList() {
        getCategoryList('course', getTenantId(), '0').then(response => {
          console.log(response.data.items);
          this.courseCategorys = response.data.items
        }).catch(() => {
        })
      },
      // 动态获取列表数据
      getCourseList() {
        this.EduUserVo.tenantId = getTenantId();
        this.EduUserVo.categoryId = this.list[this.leftIndex].courseType;
        this.EduUserVo.limit = this.list[this.leftIndex].limit;
        this.EduUserVo.day = this.list[this.leftIndex].recentDay;
        courseList(this.EduUserVo).then(response => {
          this.list[this.leftIndex].courseList = response.data.items;
          this.list[this.leftIndex].courseList.map(i => {
            i.url = i.largePicture;
            i.courseId = i.id;
            i.id = 0;
            i.liveStatus = i.status;
            i.teacher = i.userName;
            i.money = i.price;
          })
        }).catch(() => {
        })
      },
      courseType(item) {
        this.list[this.leftIndex].courseType = item[item.length - 1];
        this.getCourseList()
      },
      recentDay() {
        this.getCourseList()
      },
      limitNumber() {
        this.getCourseList()
      },
      searchTeacher() {
        // 如果有选择教师先清空多选数据
        this.$refs.multipleTable.clearSelection();
        this.multipleSelection = [];
        let search = this.teacherName;
        if (search) {
          this.filterTable = this.tableData.filter(function (dataNews) {
            return Object.keys(dataNews).some(function (key) {
              return ~String(dataNews[key])
                .toLowerCase()
                .indexOf(search)
            })
          })
        } else {
          this.filterTable = this.tableData
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleCancel() {
        this.clearDialog()
      },
      clearDialog() {
        this.dialog = false;
        this.$refs.multipleTable.clearSelection();
        this.multipleSelection = []
      },
      handleConfirm() {
        if (this.multipleSelection.length < 1) {
          this.$message.warning('请选择课程');
          return
        }
        this.list[this.leftIndex].courseList.push(...this.multipleSelection);
        this.list[this.leftIndex].courseList = Array.from(new Set(this.list[this.leftIndex].courseList));
        this.list[this.leftIndex].courseList.map(i => {
          if (!i.url) {
            i.url = i.largePicture;
          }
          i.liveStatus = i.status;
          i.teacher = i.userName;
          i.courseId = i.id;
          i.id = 0;
          if (!i.money) {
            i.money = i.price;
          }
        });
        this.clearDialog()
      },
      // 接口获取数据
      getCourseListData() {
        this.EduUserVo.tenantId = getTenantId();
        // this.EduUserVo.categoryId = 0;
        // this.EduUserVo.limit = this.list[this.leftIndex].limit;
        // this.EduUserVo.day = this.list[this.leftIndex].recentDay;
        courseList(this.EduUserVo).then(response => {
          this.tableData = response.data.items;
          this.filterTable = response.data.items;
          this.total = response.data.total;
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .courseLiveBox {
    .course_title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;

      .course_title_left {
        font-size: 16px;
        font-weight: bold;
      }

      .course_title_right {
        font-size: 12px;
        color: #616161;
      }
    }

    .courseListBox {
      width: 100%;
      height: 220px;
      display: flex;
      overflow: auto;
      padding: 10px;

      .courseList {
        width: 48%;
        margin-right: 5px;
        flex-shrink: 0;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 4px 10px #eee;

        .course_img {
          width: 100%;
          height: 100px;
          position: relative;

          img {
            width: 100%;
            height: 100%;
          }

          .teacherBox {
            position: absolute;
            display: flex;
            align-items: center;
            left: 0;
            top: 10px;

            .teacherName {
              text-align: center;
              color: #fff;
              background-color: #c6aa88;
              width: 60px;
              height: 20px;
              line-height: 20px;
            }

            .teacherImg {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              border: 1px solid #fff;
              margin-left: -3px;
            }
          }

          .status-box {
            position: absolute;
            display: flex;
            align-items: center;
            left: 4px;
            bottom: 4px;

            .left {
              width: 60px;
              position: relative;
              padding: 4px 0;
              display: flex;
              align-items: center;
              border-radius: 5px;

              .left-status-img {
                width: 13px;
                height: 13px;
                margin: 0 2px;
                padding-bottom: 2px;
              }

              .status-icon.unstatus {
                top: 2px;
              }

              .status-hint {
                font-size: 12px;
                color: #fff;
              }
            }

            .left.live {
              background-color: #f3397a;
            }

            .left.unlive {
              background-color: #a7a7a7;
            }

            .left.playback {
              background-color: #31a5e6;
            }

            .right {
              padding: 4px 4px;
              font-size: 12px;
              color: #fff;
              background: rgba(87, 87, 87, 0.8);
              border-radius: 5px;
              flex-shrink: 0;
            }
          }
        }

        .course_con {
          padding: 0 5px;

          .course_con_title {
            margin-top: 8px;
            height: 36px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
          }

          .course_con_bottom {
            padding: 10px 0;
            display: flex;
            color: #616161;
            align-items: flex-end;

            span:nth-child(1) {
              font-size: 12px;
            }

            span:nth-child(2) {
              margin-left: auto;
              text-align: center;
              font-size: 12px;
            }
          }
        }
      }
    }
  }

  .editRightList {
    width: 400px;
    position: absolute;
    left: 105%;
    top: 0;
    padding: 10px;
    border: 1px solid #e1e1e1;
    background-color: #fafafa;

    .title {
      font-size: 14px;
      padding: 8px;
      border-bottom: 1px solid #e1e1e1;

      .help-text {
        font-size: 12px;
        color: #616161;
        margin-top: 5px;
      }
    }

    .editCon {
      background-color: #fff;
      padding: 10px 5px;
      border: 1px solid #e1e1e1;
      margin-top: 5px;
    }
  }
</style>
